<template>
  <div>
    <!-- 搜索框 -->

    <el-form ref="SearchForm" :model="SearchForm" label-width="60px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="姓名：" label-width="60px">
            <el-input placeholder="请输入真实姓名" v-model="SearchForm.searchByUserName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号：" label-width="120px">
            <el-input placeholder="请输入身份证号" v-model="SearchForm.searchByUserIdCard" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="手机号码：" label-width="120px">
            <el-input placeholder="请输入手机号码" v-model="SearchForm.searchByUserPhone" />
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="searchMassage" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item>
            <el-button @click="resetFields" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 添加用户对话框 -->
    <el-button type="primary" @click="beforeAddOwnerUser" icon="el-icon-plus">添加用户</el-button>

    <el-dialog title="添加业主信息" :visible.sync="dialogFormVisible" style="font-weight:bold">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="公司名" prop="companyName">
          <el-input v-model="ruleForm.companyName" placeholder="请输入公司名"></el-input>
        </el-form-item>

        <el-form-item label="业主姓名" prop="ownerName">
          <el-input v-model="ruleForm.ownerName" placeholder="请输入业主姓名"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="ruleForm.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>

        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-input v-model="ruleForm.sex" placeholder="请输入性别"></el-input>
        </el-form-item>

        <el-form-item label="账号状态">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>

        <el-form-item style="margin-top:30px;margin-left:400px">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 数据展示--表格 -->
    <el-table :data="tableData" border style="width: 100%;border-radius: 10px; margin-top: 10px" :header-cell-style="{
          background: '#1890ff',
          color: 'white',
          'text-align': 'center',
        }" :cell-style="{
          'text-align': 'center',
        }">
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="company" label="公司名" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="业主姓名" align="center">
      </el-table-column>
      <el-table-column prop="idcard" label="身份证号" align="center">
      </el-table-column>
      <el-table-column prop="phonenumber" label="手机号码" align="center">
        
      </el-table-column>

      <el-table-column prop="sex" label="性别" align="center" >
        <template slot-scope="scope">
          <!-- 根据status的值来决定是否渲染标签一和标签二 -->
          <el-tag v-if="scope.row.sex == 0">男</el-tag>
          <el-tag v-if="scope.row.sex == 1">女</el-tag>
          <el-tag v-if="scope.row.sex == 2">未知</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="账号状态" align="center">
        <template slot-scope="scope">
          <!-- 根据status的值来决定是否渲染标签一和标签二 -->
          <el-tag v-if="scope.row.status == 0">正常</el-tag>
          <el-tag v-if="scope.row.status == 1" type="danger">停用</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="rentedCount" label="租赁的商铺" align="center">
      </el-table-column>
      <el-table-column prop="ownCount" label="拥有的商铺" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="show(scope.row)" size="small">查看</el-button>
          <el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 4,5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 修改业主信息的对话框 -->
    <el-dialog title="修改业主信息" :visible.sync="dialogModifyVisible" style="font-weight:bold">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="公司名" prop="companyName">
          <el-input v-model="ruleForm.companyName" placeholder="请输入公司名"></el-input>
        </el-form-item>

        <el-form-item label="业主姓名" prop="ownerName">
          <el-input v-model="ruleForm.ownerName" placeholder="请输入业主姓名"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="ruleForm.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>

        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号码"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-input v-model="ruleForm.sex" placeholder="请输入性别">
          </el-input>
        </el-form-item>

        <el-form-item label="账号状态">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>

        <el-form-item style="margin-top:30px;margin-left:400px">
          <el-button type="primary" @click="submitModified">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>
export default {
  data() {
    return {
      // 获取表单数据的请求地址
      url_GET_getTableData: "http://localhost:8080/getOwnerUserList",
      // 添加业主
      url_post_addOwner: "http://localhost:8080/addOwnerUser",

      // 搜索框搜索数据的表单
      SearchForm: {
        searchByUserName: "",
        searchByUserIdCard: "",
        searchByUserPhone: "",
      },

      // 表格数据
      tableData: [],

      // 分页数据
      pageNum: 1,
      pageSize: 5,
      total: 0,

      dialogFormVisible: false,
      dialogModifyVisible: false,

      ruleForm: {
        companyName: "",
        ownerName: "",
        idCard: "",
        phoneNumber: "",
        sex: "",
        status: "",
        remark: "",
        userid: "",
      },

      // 校验规则
      rules: {
        companyName: [
          { required: true, message: "请输入公司名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        ownerName: [
          { required: true, message: "请选择业主姓名", trigger: "change" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "长度为18位", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11位", trigger: "blur" },
        ],
        sex: [
          { required: true, message: "请输入性别", trigger: "blur" },
          { min: 1, max: 1, message: "长度为1位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 搜索框搜索数据
    searchMassage() {
      this.getTableData(
        this.pageNum,
        this.pageSize,
        this.SearchForm.searchByUserName,
        this.SearchForm.searchByUserIdCard,
        this.SearchForm.searchByUserPhone
      );
    },

    // 控制分页
    handleSizeChange(val) {
      this.getTableData(this.pageNum, val, "", "", "");
    },
    handleCurrentChange(val) {
      this.getTableData(val, this.pageSize, "", "", "");
    },

    beforeAddOwnerUser() {
      if (this.dialogFormVisible == false) {
        this.dialogFormVisible = true;
      } else {
        this.dialogFormVisible = false;
      }

      (this.ruleForm.companyName = ""),
        (this.ruleForm.ownerName = ""),
        (this.ruleForm.idCard = ""),
        (this.ruleForm.phoneNumber = ""),
        (this.ruleForm.sex = ""),
        (this.ruleForm.status = ""),
        (this.ruleForm.remark = ""),
        (this.ruleForm.userid = "");
    },

    // 添加用户
    submitForm() {
      this.$http
        .post(this.url_post_addOwner, this.ruleForm)
        .then((result) => {
          console.log("添加成功");
          this.dialogFormVisible = false;
          this.$message({
            message: "恭喜你，这是一条成功消息",
            type: "success",
          });

          if (this.dialogModifyVisible == true) {
            this.dialogModifyVisible = false;
          }

          this.getTableData(this.pageNum, this.pageSize, "", "", "");
        })
        .catch((error) => {
          console.log("添加业主失败");
          this.$message.error("业主已存在");
        });
    },

    // 获取表格数据
    getTableData(pageNum, pageSize, userName, idCard, phonenumber) {
      this.$http
        .get(this.url_GET_getTableData, {
          params: {
            pageNum: pageNum,
            pageSize: pageSize,
            userName: userName,
            idCard: idCard,
            phoneNumber: phonenumber,
          },
        })
        .then((result) => {
          this.tableData = result.data.data.list;
          this.total = result.data.data.total;
          this.pageNum = result.data.data.pageNum;
          this.pageSize = result.data.data.pageSize;

          console.log(result);
        })
        .catch((error) => {
          console.log("请求失败" + error);
        });
    },

    // 路由到业主详细界面
    show(row) {
      let mapObj = new Map();

      mapObj.set("userName", row.userName);
      mapObj.set("phoneNumber", row.phonenumber);
      mapObj.set("idCard", row.idcard);
      mapObj.set("user_EMail", row.email);
      mapObj.set("createTime", row.createTime);

      mapObj.set("companyName", row.company);
      mapObj.set("companyName", row.company);

      this.$router.push({
        name: "OwnerMassageInfo",
        params: { mapObj: mapObj },
      });
    },

    // 修改用户信息
    handleClick(rowData) {
      this.ruleForm.companyName = rowData.company;
      this.ruleForm.ownerName = rowData.userName;
      this.ruleForm.idCard = rowData.idcard;
      this.ruleForm.phoneNumber = rowData.phonenumber;

      // 根据rowData.sex的值改变显示的内容
      if (rowData.sex == "0") {
        this.ruleForm.sex = "男";
      } else if (rowData.sex == "1") {
        this.ruleForm.sex = "女";
      } else {
        this.ruleForm.sex = "未知";
      }
      this.ruleForm.status = rowData.status;
      this.ruleForm.remark = rowData.remark;
      this.ruleForm.userid = rowData.id;

      this.dialogModifyVisible = true;
    },

    submitModified() {
      this.$http
        .post(this.url_post_addOwner, this.ruleForm)
        .then((result) => {
          console.log("添加成功");

          this.$message({
            message: "修改成功",
            type: "success",
          });

          if (this.dialogModifyVisible == true) {
            this.dialogModifyVisible = false;
          }

          this.getTableData(this.pageNum, this.pageSize, "", "", "");
        })
        .catch((error) => {
          console.log("添加业主失败");
          this.$message.error("业主已存在");
        });
    },

    resetFields() {
      (this.SearchForm.searchByUserName = ""),
        (this.SearchForm.searchByUserIdCard = ""),
        (this.SearchForm.searchByUserPhone = ""),
        this.getTableData(1, 5, "", "", "");
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(formName);
    },
  },
  mounted() {
    this.getTableData(this.pageNum, this.pageSize, "", "", "");
  },
};
</script>

<style>
</style>